<style type="text/css">
body {
width:950px;
margin:0 auto;
font-size:12px;
}
#bd {
width:100%;
height:250px;
float:left;
overflow:hidden;
}
#bd_con {
width:100%;
float:left;
}
#b_C1 {
float:left;
}
#b_C2 {
float:left;
margin-left:10px;
}
#bd_t {
width:190px;
height:30px;
position:relative;
margin-top:-50px;
background:#FCF;
text-align:center;
padding:10px 5px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#bd_t_t {
width:190px;
height:30px;
position:relative;
margin-top:-50px;
text-align:center;
padding:10px 5px;
z-index:999;
}
#bd_t_b {
width:190px;
height:30px;
position:relative;
margin-top:-50px;
background:#FCF;
text-align:center;
padding:10px 5px;
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
#bd_b {
width:200px;
height:250px;
position:relative;
background:url(./img.gif)
}
</style>

<div id="bd">
  <div id="b_C1">
    <div id="bd_b"></div>
    <div id="bd_t"> <span>这里填写标题字数不要太多</span> <br />
      <span>价格：199元</span> </div>
  </div>
  
  
  <div id="b_C2">
    <div id="bd_b"></div>
    <div id="bd_t_t"> <span>这里填写标题字数不要太多</span> <br />
      <span>价格：199元</span> </div>
    <div id="bd_t_b"></div>
  </div>
  
  <div id="b_C2">
    <div><img src="./img.gif"></img></div>
    <div id="bd_t_t"> <span>这里填写标题字数不要太多</span> <br />
      <span>价格：199元</span> </div>
    <div id="bd_t_b"></div>
  </div>
</div>
<div id="bd_con">对比一下，在这两个效果中，各有好处。这个代码的写法... </div>





